<template>
  <div class="buyerEchart">
    <div id="myEchart" style="width: 100%;height: 260px"></div>
    <el-row class="top">
      <el-col :span="8">HS Code</el-col>
      <el-col :span="8">金额 (美元)</el-col>
      <el-col :span="8">交易次数(次)</el-col>
    </el-row>
    <el-row>
      <el-col :span="8"><span class="one"></span>44201001</el-col>
      <el-col :span="8">16,024,23</el-col>
      <el-col :span="8">39</el-col>
    </el-row>
    <el-row>
      <el-col :span="8"><span class="two"></span>44201001</el-col>
      <el-col :span="8">16,024,23</el-col>
      <el-col :span="8">39</el-col>
    </el-row>
    <el-row>
      <el-col :span="8"><span class="three"></span>44201001</el-col>
      <el-col :span="8">16,024,23</el-col>
      <el-col :span="8">39</el-col>
    </el-row>
    <el-row>
      <el-col :span="8"><span class="four"></span>44201001</el-col>
      <el-col :span="8">16,024,23</el-col>
      <el-col :span="8">39</el-col>
    </el-row>
  </div>
</template>

<script>
    export default {
        name: "BuyerEchart",
        mounted() {
            let option = {
                title: {
                    text: '出口产品金额',
                    x: 'lft',
                    textStyle: {
                        fontWeight: 'normal',
                        color: '#435B77'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    top: '12%',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告']
                },
                calculable: true,
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        roseType: 'area',
                        data: [
                            {value: 335, name: '直接访问', itemStyle: {color: '#FBB363'}},
                            {value: 310, name: '邮件营销', itemStyle: {color: '#5DBBAB'}},
                            {value: 234, name: '联盟广告', itemStyle: {color: '#A6E8A1'}},
                            {value: 135, name: '视频广告', itemStyle: {color: '#debf09'}}
                        ]
                    }
                ]
            };
            this.myChart = this.$echarts.init(document.getElementById('myEchart'));
            this.myChart.setOption(option)
        }
    }
</script>

<style scoped lang="scss">
  $activeColor: #2a97f9;
  .buyerEchart {
    .el-row {
      line-height: 35px;
      .el-col.el-col-8 {
        text-align: center;
        font-size: 14px;
        color: #435B77;
        display: flex;align-items: center;
        justify-content: center;
        span{
          display: inline-block;
          width:20px;
          height:16px;
          border-radius:4px;
          margin-right: 5px;
        }
        .one{
          background:#5DBBAB;
        }
        .two{
          background:#FBB363;
        }
        .three{
          background:#A6E8A1;
        }
        .four{
          background:#FFF4B4;
        }
      }
    }

    .el-row.top {
      background: rgba(234, 240, 246, 1);
      .el-col.el-col-8{
        color: $activeColor;
      }
    }
  }
</style>
